<div class="bg-light lter b-b wrapper-md clearfix titleBtns">
    <h2 class="m-n font-thin h4 pull-left">数据库 > Mysql > 新建实例</h2>
    <div class="btns pull-right">
        <button class="btn m-b-xs w-xs btn-info">登录数据库</button>
        <button class="btn m-b-xs w-xs btn-info">迁移数据库</button>
        <button class="btn m-b-xs w-xs btn-info">重启实例</button>
        <button class="btn m-b-xs w-xs btn-info">备份实例</button>
    </div>
</div>


<div class="wrapper-md">
    <form novalidate name="formData" ng-submit="submitFormData()">

        <div class="row">
            <div class="col-sm-12 col-md-12">
                <div class="panel panel-default">
                    <dl class="bk-group">
                        <dt class="bk-title">
                            <span>基</span>
                            <span>本</span>
                            <span>配</span>
                            <span>置</span>
                        </dt>
                        <dd class="bk-detail">
                            <div class="form-group row">
                                <div class="wrap-title col-md-1">地域:</div>
                                <div class="form-control1 col-md-11">
                                    <div class="wrap">
                                        <input type="radio" id="radio_1" name="region" class="chk_1" value="北京" ng-model="data.region"/>
                                        <label for="radio_1">北京</label>
                                        <input type="radio" id="radio_2" name="region" class="chk_1" value="上海" ng-model="data.region"/>
                                        <label for="radio_2">上海</label>
                                        <input type="radio" id="radio_3" name="region" class="chk_1" value="大连" ng-model="data.region"/>
                                        <label for="radio_3">大连</label>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group row">
                                <div class="wrap-title col-md-1">可用区:</div>
                                <div class="form-control1 col-md-3">
                                    <div class="input-group">
                                        <ui-select ng-model="dbFormGrid.queryParams[field.name]" theme="bootstrap">
                                            <ui-select-match placeholder="请选择">{{$select.selected.name}}</ui-select-match>
                                            <ui-select-choices
                                                    repeat="item in field.dropDownItemValue">
                                                <div ng-bind-html="item.name"></div>
                                            </ui-select-choices>
                                        </ui-select>
                                        <span class="input-group-btn">
                                          <button ng-click="dbFormGrid.queryParams[field.name] = [{name: '请选择', value: ''}]"
                                                  class="btn btn-default" type="button">
                                              <span class="glyphicon glyphicon-trash"></span>
                                          </button>
                                        </span>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group row">
                                <div class="wrap-title col-md-1">版本:</div>
                                <div class="form-control1 col-md-11">
                                    <div class="wrap">
                                        <input type="radio" id="radio_4" name="version" class="chk_1" value="5.5" ng-model="data.version"/>
                                        <label for="radio_4">5.5</label>
                                        <input type="radio" id="radio_5" name="version" class="chk_1" value="5.6" ng-model="data.version"/>
                                        <label for="radio_5">5.6</label>
                                    </div>
                                </div>
                            </div>

                        </dd>
                    </dl>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12 col-md-12">
                <div class="panel panel-default">
                    <dl class="bk-group">
                        <dt class="bk-title">
                            <span>存</span>
                            <span>储</span>
                        </dt>
                        <dd class="bk-detail">
                            <div class="form-group row">
                                <div class="wrap-title col-md-1">存储空间:</div>
                                <div class="form-control1 col-md-8">
                                    <rzslider rz-slider-model="slider_visible_bar.value" rz-slider-options="slider_visible_bar.options"></rzslider>
                                </div>
                                <div class="col-md-2">
                                    <!--<input type="text" ng-model="slider_visible_bar.value" style="width: 55px;height: 35px;margin-top: 5px;margin-right: 3px;"/>G-->
                                    <div class="clearfix numberComponent" style="margin-top: 5px;margin-left: -5px;">
                                        <input type="text" ng-disabled="slider_visible_bar.value >= 2000 || slider_visible_bar.value <= 0" class="form-control" ng-model="slider_visible_bar.value" style="width: 55px;height: 35px;"/>
                                        <div class="plusMinus">
                                            <button ng-disabled="slider_visible_bar.value >= 2000" ng-click="slider_visible_bar.value=slider_visible_bar.value+5">
                                                <i class="fa fa-caret-up"></i>
                                            </button>
                                            <button ng-disabled="slider_visible_bar.value <= 0" ng-click="slider_visible_bar.value=slider_visible_bar.value-5">
                                                <i class="fa fa-caret-down"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group row">
                                <div class="wrap-title col-md-1">内存:</div>
                                <div class="form-control1 col-md-3">
                                    <div class="input-group">
                                        <ui-select ng-model="dbFormGrid.queryParams[field.name]" theme="bootstrap">
                                            <ui-select-match placeholder="请选择">{{$select.selected.name}}</ui-select-match>
                                            <ui-select-choices
                                                    repeat="item in field.dropDownItemValue">
                                                <div ng-bind-html="item.name"></div>
                                            </ui-select-choices>
                                        </ui-select>
                                        <span class="input-group-btn">
                                          <button ng-click="dbFormGrid.queryParams[field.name] = [{name: '请选择', value: ''}]"
                                                  class="btn btn-default" type="button">
                                              <span class="glyphicon glyphicon-trash"></span>
                                          </button>
                                        </span>
                                    </div>
                                </div>
                            </div>

                        </dd>
                    </dl>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12 col-md-12">
                <div class="panel panel-default">
                    <dl class="bk-group">
                        <dt class="bk-title">
                            <span>实</span>
                            <span>例</span>
                            <span>数</span>
                            <span>量</span>
                        </dt>
                        <dd class="bk-detail">
                            <div class="form-group row">
                                <div class="wrap-title col-md-1">申请时长:</div>
                                <div class="form-control1 col-md-10">
                                    <ul class="timeGrid clearfix col-md-6" id="timeGrid">
                                        <li ng-repeat="n in monthArr" ng-click="chooseLi(n)" ng-class="{'active':n.checked}">{{n.num}}</li>
                                    </ul>
                                    <div class="col-md-2" style="line-height: 30px;margin-left: -15px;">
                                        <span>{{monthNum}}</span>个月
                                    </div>
                                </div>
                            </div>

                            <div class="form-group row">
                                <div class="wrap-title col-md-1">数量:</div>
                                <div class="form-control1 col-md-10">
                                    <div class="clearfix numberComponent">
                                        <input type="text" class="form-control" ng-model="data.count"/>
                                        <div class="plusMinus">
                                            <button ng-click="data.count=data.count+1">
                                                <i class="fa fa-caret-up"></i>
                                            </button>
                                            <button ng-disabled="data.count <= 1" ng-click="data.count=data.count-1">
                                                <i class="fa fa-caret-down"></i>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>

                        </dd>
                    </dl>
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-md-12" style="text-align: center;">
                <button type="submit" class="btn btn-success">保存实例</button>
            </div>
        </div>

    </form>
</div>